import React from "react";
import { useEffect, useState } from "react";
import "./Heroscon.css";
import axios from "axios";
import {
  useLocation,
  useNavigate,
  useParams,
  useSearchParams,
} from "react-router-dom";

export default function Heroscon() {
  // searchParams 取参
  // let [params] = useSearchParams();
  // console.log(a);
  // let [params] = a;
  // let id = params.get("id");

  // params 取参
  // let { id } = useParams();

  // uselocation 取参
  let obj = useLocation();
  let { id } = obj.state;

  useEffect(() => {
    async function main() {
      let res = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
      let { data } = res;
      setherocon(data);
      console.log(data);
    }
    main();
  }, []);

  let [herocon, setherocon] = useState({});
  let navigate = useNavigate();
  // 回到英雄列表
  let goprev = function () {
    navigate(-1);
  };
  // 回到首页
  let gohome = function () {
    navigate("/home", { replace: true });
  };

  return (
    <div>
      <div className="heros-con">
        <div className="heros-left">
          <button onClick={goprev}>后退</button>
          <button onClick={gohome}>回到首页</button>
          <img src={`http://cdn.xiaohigh.com/${herocon.image}`} alt="" />
          <h2>{herocon.name}</h2>
          <h3>{herocon.type}</h3>

          <div className="img-min">
            <ul>
              {herocon.skills &&
                herocon.skills.map((item, index) => {
                  return (
                    <li key={index}>
                      <img src={`http://cdn.xiaohigh.com/${item.img}`} alt="" />
                      <h4>{item.name}</h4>
                    </li>
                  );
                })}
            </ul>
          </div>
        </div>
        <div className="heros-right">
          <img src={`http://cdn.xiaohigh.com/${herocon.big_image}`} alt="" />
          <hr />
          <p dangerouslySetInnerHTML={{ __html: herocon.intro }}></p>
        </div>
      </div>
    </div>
  );
}
